import {
  Card,
  Button,
  Form,
  Input,
  Table,
  Tooltip,
  Popconfirm,
  message,
} from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import { useEffect, useState, Key } from 'react'
import {
  HospitalSetItem,
  HospitalSetList,
} from '@api/hospital/model/hospitalSetTypes'
import {
  reqGetHospitalSetList,
  reqRemoveHospital,
  reqRemoveHospitalList,
} from '@api/hospital/hospitalSet'
import { useNavigate } from 'react-router-dom'

/*
  columns ： 表格所有列的描述信息对象数组
    title: 标题
    dataIndex: '要显示数据的属性名
    render(可选): 回调函数，用于返回要显示的界面

    width: 宽度
    fixed: 固定当前列
*/

export default function HospitalSet() {
  // 建议存储在状态
  const [current, setCurrent] = useState(1)
  const [pageSize, setpageSize] = useState(5)
  const [total, setTotal] = useState(0)
  const [bool, setBool] = useState(false)

  // 维护批量选择的的ids
  const [selectedIds, setSelectedIds] = useState<Key[]>([])

  // 声明编程式导航的方法
  const navigate = useNavigate()

  // 以后的数据都是从异步请求中得来，所以ts对于异步请求的数据无法限制
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      render(value, row, index) {
        return index + 1
      },
      width: 60,
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      width: 120,
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
      width: 180,
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
      width: 120,
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
      width: 120,
    },
    {
      title: '操作',
      // 在 render 上有一个形参，这个形参代表当前行的信息
      render(row) {
        return (
          <>
            <Tooltip placement="top" title="编辑医院设置">
              <Button
                type="primary"
                onClick={() => navigate('/syt/hospital/edit/' + row.id)}
                icon={<EditOutlined />}
              />
            </Tooltip>

            <Popconfirm
              title="是否确定删除本条记录?"
              okText="确定"
              cancelText="取消"
              placement="right"
              onConfirm={() => delHos(row.id)}
            >
              <Tooltip placement="top" title="删除医院设置">
                <Button
                  type="primary"
                  className="ml"
                  danger
                  icon={<DeleteOutlined />}
                />
              </Tooltip>
            </Popconfirm>
          </>
        )
      },
      // 单独给列宽度
      width: 110,
      // 固定列
      fixed: 'right',
    },
  ]

  // 删除单个id的信息
  async function delHos(id: number) {
    // 发起请求
    // console.log(id)
    await reqRemoveHospital(id)
    message.success('删除医院成功！')
    getHospitalList(current, pageSize)
  }

  // 声明存储医院设置列表数据的字段-如果要约束一下类型则应该使用类型接口
  const [hospitalList, setHospitalList] = useState<HospitalSetList>([])

  const getHospitalList = async (page = current, limit = pageSize) => {
    // 在底部的 onFinish 方法中不方便传参，还不如直接这里获取
    // console.log(form.getFieldsValue());
    const { hosname, hoscode } = form.getFieldsValue()

    const result = await reqGetHospitalSetList({
      page,
      limit,
      hosname,
      hoscode,
    })
    // console.log(result);
    // 只需要解构数据和总数，因为既然请求函数执行了，那么参数和返回的数据都是一样的
    const { records, total } = result
    // 更新本地的数据列表
    setHospitalList(records)
    setCurrent(page)
    setpageSize(limit)
    setTotal(total)
    setBool(false)
  }

  // 发起请求一般在 useEffect Hooks 函数中
  useEffect(() => {
    getHospitalList(current, pageSize)
  }, [])

  // 使用 Form 组件自带的方法，创建对象给 Form 组件添加该属性
  const [form] = Form.useForm()

  // function onFinish(values: any) {
  //   console.log(values);
  // }
  // 表单提交
  function onFinish() {
    // 如果是搜索，那么当前页，一定是第一页
    // 函数内部接收参数，那么就给个1也就可以了

    // 发起请求，在请求函数内部获取表单的数据
    getHospitalList(1)
  }

  // 表单重置
  function resetForm() {
    // console.log(form);
    form.resetFields()
    getHospitalList(1)
  }

  // 删除多条医院记录
  async function delHosList() {
    // console.log(selectedIds);
    await reqRemoveHospitalList(selectedIds)

    message.success('批量删除成功！')
    getHospitalList(current, pageSize)
  }

  /*
      Form 表单，用于收集数据，并且提供了提交的事件，自动获取
        onFinish 方法，当表单发起提交之后才会触发
        如果要触发这个事件，那么button就必须添加 htmlType="submit"
        以往的表单，name添加在input框上，但是在这里，name要加在item上
        默认只有onFinish 事件监听在form上，其他事件都是click

        要使用form的方法，则使用 useForm 的方式给表单组件加上form属性
        调用  form.resetFields 可以重置表单的字段
        form.getFieldsValue()  获取表单的所有字段，单个的需要传参

  */

  return (
    <Card>
      {/* 1. 查询表单 */}
      <Form form={form} layout="inline" onFinish={onFinish}>
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>
        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
          <Button className="ml" onClick={resetForm}>
            清空
          </Button>
        </Form.Item>
      </Form>

      <div style={{ margin: '20px 0' }}>
        <Button
          type="primary"
          // 如果这里想写成add，那么路由就得是该路由下一级
          onClick={() => navigate('/syt/hospital/add')}
          // onClick={() => navigate('add')}
        >
          添加
        </Button>

        {/* disabled 要求是布尔值 */}
        <Popconfirm
          title="是否确定删除多条记录?"
          okText="确定"
          cancelText="取消"
          placement="top"
          onConfirm={delHosList}
        >
          <Button
            type="primary"
            danger
            disabled={selectedIds.length === 0}
            className="ml"
          >
            批量删除
          </Button>
        </Popconfirm>
      </div>

      {/* 2. 展示的表格 */}
      {/* rowSelection 提供表格的选择工具 */}
      <Table
        rowSelection={{
          // selectedRowKeys 选中的行key值复数形式    selectedRows选中的行信息
          onChange: (selectedRowKeys: Key[]) => {
            // console.log(selectedRowKeys);
            setSelectedIds(selectedRowKeys)
          },
        }}
        columns={columns}
        dataSource={hospitalList}
        bordered
        rowKey="id"
        scroll={{ x: 1300 }}
        // 除了字符之外，所有的数据都需要加 {}
        loading={bool}
        pagination={{
          current,
          total,
          pageSize,
          showSizeChanger: true,
          pageSizeOptions: [5, 10, 15],
          showQuickJumper: true,
          showTotal: (total) => `总共${total}条`,

          // onChange: 当页码更新或者数量更新，会重新执行
          onChange: getHospitalList,
        }}
        /*
          pagenation:
              current: 当前页
              total: 总条数
              pageSize: 每页展示的条数
              showSizeChanger: 展示改变每页条数的条目组件
              pageSizeOptions: 切换每页条数组件的数组
              showQuickJumper: 展示跳转至某页的组件
              showTotal: 展示总条数
        */
      />
    </Card>
  )
}
